<template>
	<div style="height: 100%">
		<div class="contents">
			<div class="contentsLeft">
				<el-card class="box-card">
					<div slot="header" class="clearfix" style="display: flex; justify-content: space-between; align-items: center">
						<div>填写内容</div>
						<div>
							<el-button style="padding: 3px 6px 3px 0" type="text">{{ $route.query.productName }}-{{ $route.query.productModel }} ( 产品编号：{{ $route.query.productNumber }} )</el-button>
							<el-button @click="handleExport" style="padding: 3px 6px 3px 0" type="text" v-hasPermi="['erp:taskFilling:export']" v-if="dataforms.processType">生成{{ dataforms.processType == "1" ? "弹簧测力" : "探伤报告" }}</el-button>
							<el-button @click="handleFiles" style="padding: 3px 6px 3px 0" type="text" v-hasPermi="['erp:taskFilling:files']">附件</el-button>
							<el-dropdown style="padding: 3px 6px 3px 0">
								<div style="color: #37b3b3">零件图号表</div>
								<el-dropdown-menu slot="dropdown" class="userdropdown">
									<el-table :data="listParts" border="">
										<el-table-column label="序号" align="center" type="index" width="55" />
										<el-table-column label="零件名称" prop="partName" min-width="150" :show-overflow-tooltip="true" />
										<el-table-column label="零件数量" prop="partQuantity" min-width="150" :show-overflow-tooltip="true" />
										<el-table-column label="型号" prop="partFigure" min-width="150" :show-overflow-tooltip="true" />
									</el-table>
								</el-dropdown-menu>
							</el-dropdown>
							<el-dropdown>
								<div style="color: #37b3b3">工艺通知单附件</div>
								<el-dropdown-menu slot="dropdown" class="userdropdown" style="height: 250px">
									<el-table :data="filesListData" border height="100%">
										<el-table-column label="序号" align="center" type="index" width="55" />
										<el-table-column label="文件类型" prop="fileType" min-width="100" :show-overflow-tooltip="true" />
										<el-table-column label="文件名称" prop="fileName" min-width="150" :show-overflow-tooltip="true" />
										<el-table-column label="创建时间" align="center" prop="createTime" min-width="160" :show-overflow-tooltip="true" />
										<el-table-column label="上传人员" prop="createBy" min-width="100" :show-overflow-tooltip="true" align="center" />
										<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
											<template slot-scope="scope">
												<el-button size="mini" type="text" icon="el-icon-view" @click="handlePreview(scope.row)">预览</el-button>
												<el-button size="mini" type="text" icon="el-icon-download" @click="handledownload(scope.row)">下载</el-button>
											</template>
										</el-table-column>
									</el-table>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
					<div id="editorVal" v-html="form.content" @input="inputData($event)"></div>
				</el-card>
			</div>
			<div class="contentsRight">
				<el-card v-if="dataforms.technologyDictCode != '8'" :class="[form.trepairProductProcessSteps.length == 0 ? 'box-cards' : 'box-card']">
					<div slot="header" class="clearfix" style="display: flex; justify-content: space-between; align-items: center">
						<div style="width: 86%">更补零件</div>
						<div style="display: flex; align-items: center">
							<div>
								<el-button style="padding: 3px 10px 3px 0" type="text" @click="addPart" v-if="dataforms.technologyDictCode == '5' || dataforms.technologyDictCode == '6' || dataforms.technologyDictCode == '7'">新增</el-button>
							</div>
							<div>
								<el-dropdown ref="dropdownRef">
									<el-button style="padding: 3px 5px" type="text">质检工序</el-button>
									<el-dropdown-menu slot="dropdown" class="userdropdowns">
										<el-table :data="list3Data" border="">
											<el-table-column label="序号" align="center" type="index" width="55" />
											<el-table-column label="填报内容" prop="productModel" min-width="350">
												<template slot-scope="scope">
													<div v-html="scope.row.content"></div>
												</template>
											</el-table-column>
										</el-table>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</div>
					</div>
					<div style="width: 100%" class="parts_Content">
						<div v-for="(item, index) in partLists" :key="index" class="parts_Contents">
							<div class="title">{{ item.partName }}-{{ item.partFigure }}</div>
							<el-input-number v-model="item.partQuantity" :step="1" step-strictly :disabled="item.disable"></el-input-number>
							<div class="titles">更换原因</div>
							<el-input v-model="item.replacementSituation" :disabled="item.disable" style="width: 350px"></el-input>
						</div>
					</div>
				</el-card>
				<!-- <el-card v-else :class="[form.trepairProductProcessSteps.length == 0 ? 'box-cards' : 'box-card']">
					<div slot="header" class="clearfix">
						<span>合格标志</span>
					</div>
					<div>
						<div class="conclusionFlag">
							<div class="conclusionTitle" style="margin-right: 20px; width: 40px">标志</div>
							<el-select v-model="form.conclusionFlag">
								<el-option v-for="item in conclusionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
							</el-select>
						</div>
						<div class="conclusionFlag" style="margin-top: 15px">
							<div class="conclusionTitle" style="margin-right: 20px; width: 40px">结论</div>
							<el-input v-model="form.conclusion" maxlength="100" show-word-limit  style="width: 90%" type="textarea"></el-input>
						</div>
					</div>
				</el-card> -->
				<!-- v-if="form.trepairProductProcessSteps.length" -->
				<el-card :class="[form.trepairProductProcessSteps.length == 0 ? 'box-cards' : 'box-card']">
					<div slot="header" class="clearfix">
						<span>外委零件</span>
					</div>
					<!-- <el-checkbox-group v-model="checkList">
						<div v-for="item in form.trepairProductProcessSteps" :key="item.processStepId">
							<el-checkbox :label="item.processStepId" :value="item.processStepId">{{ item.processStepName }}</el-checkbox>
						</div>
					</el-checkbox-group> -->
					<div style="width: 100%" class="parts_Content">
						<div v-for="(item, index) in StepsList" :key="index" class="parts_Contents">
							<div class="title">{{ item.partName }}-{{ item.partFigure }}</div>
							<el-input-number v-model="item.quantityquantity" :step="1" step-strictly disabled></el-input-number>
						</div>
					</div>
				</el-card>
				<el-card v-if="dataforms.status == '1'" :class="[form.trepairProductProcessSteps.length == 0 ? 'box-cards' : 'box-card']">
					<div slot="header" class="clearfix">
						<span>完成人员及时间</span>
					</div>
					<div style="display: flex">
						<el-select v-model="form.accomplishUserId" @change="selectaccomplishUser" style="margin-right: 20px">
							<el-option v-for="item in workshopSectionList" :key="item.userId" :value="item.userId" :label="item.nickName"></el-option>
						</el-select>

						<el-date-picker v-model="form.accomplishTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"> </el-date-picker>
					</div>
				</el-card>
			</div>
		</div>
		<div slot="footer" class="dialog-footers">
			<el-button type="primary" @click="submitData(1)" v-if="dataforms.status == '1'">修 改</el-button>
			<el-button type="primary" @click="submitData(2)" v-if="dataforms.status == '2'">暂 存</el-button>
			<el-button type="primary" @click="commitStepBefore">上一步</el-button>
			<el-button type="primary" :disabled="!dataFormStatus" @click="submitData(3)" v-if="dataforms.status == '2' || dataforms.status == '1'">确 认</el-button>
			<el-button type="primary" @click="commitStep">下一步</el-button>
			<el-button @click="goback">取 消</el-button>
		</div>
		<el-dialog title="新增零组件" :visible.sync="open" width="900px" append-to-body v-dialogDrag>
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="零组件" prop="selectPartList">
					<el-select v-model="selectPartList" multiple style="width: 300px">
						<el-option v-for="item in listParts" :key="item.partId" :label="item.partName + '(' + item.partFigure + ')'" :value="item.partId"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="open = false">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog title="质检工序" :visible.sync="checkOpen" width="900px" append-to-body v-dialogDrag>
			<el-table :data="list3Data" border="">
				<el-table-column label="序号" align="center" type="index" width="55" />
				<el-table-column label="工序名称" prop="processName" min-width="200" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<el-tooltip placement="top">
							<div slot="content" class="custom-tooltip-content">
								<div id="editorVal" v-html="scope.row.content"></div>
							</div>
							<div class="custom-tooltip-trigger">{{ scope.row.processName }}</div>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column label="产品名称" prop="productName" min-width="150" :show-overflow-tooltip="true" />
				<el-table-column label="产品型号" prop="productModel" min-width="150" :show-overflow-tooltip="true" />
			</el-table>
			<pagination v-show="totalcheck > 0" :total="totalcheck" :page.sync="queryParamscheck.pageNum" :limit.sync="queryParamscheck.pageSize" @pagination="getLists" />
		</el-dialog>

		<el-dialog title="预览" :visible.sync="openPreview" width="1000px" append-to-body v-dialogDrag>
			<previewExcel :previewUrl="previewUrl" :previewType="previewType"></previewExcel>
		</el-dialog>
	</div>
</template>
<script>
import { beforeProcessId, getProcessId, list3, getRepairProductProcess, fillIn, attachmentList } from "@/api/taskFilling/repairProductProcess"
import { productPart, sectionUser1 } from "@/api/selectList"
import { partSuit1 } from "@/api/part/part"
import previewExcel from "@/views/components/previewTemplete/excels.vue"
export default {
	name: "writeContentssss",
	components: { previewExcel },
	dicts: ["default_changereason"],
	data() {
		return {
			confirmButton: false,
			dataFormStatus: true,
			openPreview: false,
			previewType: "",
			previewUrl: "",
			filesListData: [],
			productIds: "",
			StepsList: [],
			vals: "",
			showReason: false,
			queryParamscheck: {},
			totalcheck: 0,
			checkOpen: false,
			list3Data: [],
			conclusionList: [
				{
					id: "1",
					name: "合格"
				},
				{
					id: "2",
					name: "不合格"
				},
				{
					id: "3",
					name: "压力不降"
				},
				{
					id: "4",
					name: "工作正常"
				},
				{
					id: "5",
					name: "无泄漏"
				}
			],
			// 原因列表
			reasonList: [],
			// 步骤选中数据
			checkList: [],
			// 选中零件下拉框数据
			selectPartList: [],
			open: false,
			// 零件数量列表
			Nums: [],
			htmlStr: "",
			form: { content: "", trepairProductProcessSteps: [] },
			// 新增零件下拉框数据
			listParts: [],
			// 填写内容零件名称
			partName: "",
			partFigure: "",
			// 更补渲染的数据
			finallylist: [],
			hasPart: false,
			// 新增得数据
			addProductlist: [],
			// 工段人员
			workshopSectionList: [],
			partLists: [],
			getData: [],
			copyList: [],
			addrightList: [],
			dataforms: {},
			data: [
				{
					id: "1",
					name: "111"
				},
				{
					id: "2",
					name: "222"
				}
			]
		}
	},
    activated(){
		this.dataforms = this.$route.query
		this.dataFormStatus = this.dataforms.processStatus == "0" || this.dataforms.processStatus == "3"
		this.dataforms.id && this.getDetails()
		this.dataforms.id && this.attachmentLists()
		this.dataforms.repairProductId && this.getPart()
		this.dataforms.repairProductId && this.getLists()
		this.dataforms.workshopSectionId && this.geSection()
	},
	created() {
		this.dataforms = this.$route.query
		this.dataFormStatus = this.dataforms.processStatus == "0" || this.dataforms.processStatus == "3"
		this.dataforms.id && this.getDetails()
		this.dataforms.id && this.attachmentLists()
		this.dataforms.repairProductId && this.getPart()
		this.dataforms.repairProductId && this.getLists()
		this.dataforms.workshopSectionId && this.geSection()
	},
	methods: {
		handlePreview(row) {
			this.previewUrl = row.path
			this.previewType = row.path.substr(row.path.lastIndexOf(".") + 1)
			this.openPreview = true
		},
		// 下载
		handledownload(row) {
			window.open(row.path)
		},
		attachmentLists() {
			attachmentList(this.dataforms.id).then(res => {
				this.filesListData = res.data
			})
		},
		handleFiles() {
			this.$router.push({
				path: "/attachment/attachmentUpload",
				query: {
					paths: "/taskFilling/taskFill/writeContent/index",
					TableId: this.dataforms.id,
					status: this.dataforms.status,
					repairProductId: this.dataforms.repairProductId,
					workshopSectionId: this.dataforms.workshopSectionId,
					technologyDictCode: this.dataforms.technologyDictCode,
					processType: this.dataforms.processType,
					typeId: 15,
					fillingId: this.$route.query.fillingId,
					processStatus: this.dataforms.processStatus,
					perm: "erp:taskFilling:files",
					productName: this.$route.query.productName,
					productModel: this.$route.query.productModel,
					productNumber: this.$route.query.productNumber
				}
			})
			// this.form.trepairProductProcessSteps.length &&
			// 	this.form.trepairProductProcessSteps.forEach(item => {
			// 		item.processStepState = 0
			// 	})
			// this.checkList.length &&
			// 	this.checkList.forEach(item => {
			// 		this.form.trepairProductProcessSteps.forEach(items => {
			// 			if (item == items.processStepId) {
			// 				items.processStepState = 1
			// 			}
			// 		})
			// 	})
			// fillIn({
			// 	accomplishUserName: this.form.accomplishUserName,
			// 	accomplishUserId: this.form.accomplishUserId,
			// 	conclusionFlag: this.form.conclusionFlag,
			// 	conclusion: this.form.conclusion,
			// 	trepairProductProcessStepParts: this.partLists,
			// 	trepairProductProcessSteps: this.form.trepairProductProcessSteps,
			// 	tpropertyRegistrationOuters: this.StepsList,
			// 	content: document.getElementById("editorVal").innerHTML,
			// 	id: this.dataforms.id,
			// 	submitStatus: 2
			// }).then(res => {
			// 	this.$router.push({
			// 		path: "/attachment/attachmentUpload",
			// 		query: {
			// 			id: this.dataforms.id,
			// 			status: this.dataforms.status,
			// 			repairProductId: this.dataforms.repairProductId,
			// 			workshopSectionId: this.dataforms.workshopSectionId,
			// 			technologyDictCode: this.dataforms.technologyDictCode,
			// 			processType: this.dataforms.processType,
			// 			typeId: 15,
			// 			processStatus: this.dataforms.processStatus,
			// 			perm: "erp:taskFilling:files"
			// 		}
			// 	})
			// })
		},
		handleExport() {
			this.download(`/data/processWord/spring/${this.dataforms.id}`, {}, `${this.dataforms.processType == "1" ? "弹簧测力报告" : "探伤报告"}_${new Date().getTime()}.docx`)
		},
		checkProcess() {
			this.checkOpen = true
		},
		addData() {
			let Array = JSON.parse(JSON.stringify(this.copyList))
			let ArrayPart = JSON.parse(JSON.stringify(this.addrightList))
			let copyParts = JSON.parse(JSON.stringify(this.form.trepairProductProcessStepParts))
			console.log(ArrayPart, Array, "Array")
			ArrayPart.push(...Array, ...copyParts)
			Array.forEach((item, index1) => {
				ArrayPart.forEach((items, index) => {
					//  && !item.parentId
					if (item.productPartId == items.productPartId) {
						item.replacementSituation = item.replacementSituation ? item.replacementSituation : items.replacementSituation
						item.partQuantity = item.partQuantity ? item.partQuantity : items.partQuantity
						ArrayPart.splice(index, 1, {
							id: items.id || "",
							partQuantity: item.partQuantity,
							productPartId: item.productPartId,
							partName: items.partName || item.partName,
							partFigure: items.partFigure || item.partFigure,
							replacementSituation: item.replacementSituation,
							disable: items.disable || item.disable,
							mustChangeFlag: items.disable ? 0 : 1 || item.disable ? 0 : 1,
							parent: "true",
							parentId: items.parentId || item.parentId
						})
					}
				})
			})
			//  && item.parentId === obj.parentId
			var mergedArray = ArrayPart.reduce(function (result, obj) {
				var target = result.find(function (item) {
					return item.productPartId === obj.productPartId
				})
				if (target) {
					Object.assign(target, obj)
				} else {
					result.push(obj)
				}
				return result
			}, [])

			// 将填写的和带出来的数据分开
			let sortArray = []
			let sortArray1 = []
			mergedArray.forEach(item => {
				if (item.parentId) {
					sortArray1.push(item)
				} else {
					sortArray.push(item)
				}
			})
			// 将父子级的显示在一起
			let newsortArray = []
			sortArray.forEach(item => {
				newsortArray.push(item)
				sortArray1.forEach(items => {
					if (item.productPartId == items.parentId) {
						newsortArray.push(items)
					}
				})
			})
			this.partLists = newsortArray
		},
		// 去重
		removeSame1(arr) {
			let map = new Map()
			for (let item of arr) {
				// map.has()方法判断map中是否存在这个键
				// 不存在，则将键和值同时设置到map集合中，
				if (!map.has(item.productPartId)) {
					map.set(item.productPartId, item)
				}
			}
			// 返回map的值
			return [...map.values()]
		},
		selectaccomplishUser(e) {
			this.workshopSectionList.forEach(item => {
				if (e == item.userId) {
					this.form.accomplishUserName = item.nickName
				}
			})
		},
		geSection() {
			sectionUser1().then(res => {
				this.workshopSectionList = res.rows
			})
		},
		goback() {
			const obj = { path: this.$route.path }
			this.$tab.closePage(obj).then(() => {
				this.$router.push({
					path: "/taskFilling/taskFill/menuList/index",
					query: {
						fillingId: this.$route.query.fillingId,
						productName: this.$route.query.productName,
						productModel: this.$route.query.productModel,
						productNumber: this.$route.query.productNumber,
						queryData: JSON.stringify({
							id: this.$route.query.id
						})
					}
				})
			})
		},
		// 填写工卡
		submitData(status) {
			// const parser = new DOMParser()
			// const pastedDoc = parser.parseFromString(document.getElementById("editorVal").innerHTML, "text/html")
			// const inputs = pastedDoc.querySelectorAll("input")
			// inputs.forEach(item => {
			// 	if (item.value && item.required) {
			// 		if (item.value.includes("返")) {
			//       item.setAttribute('value',"返修必换件")
			// 		}
			// 	}
			// })
			// var serializer = new XMLSerializer()
			// // 将文档对象转换为HTML字符串
			// var htmlString = serializer.serializeToString(pastedDoc)
			// var doc1 = parser.parseFromString(htmlString, "text/html")
			// var ols1 = doc1.querySelectorAll("body")
			// // 获取body元素内的HTML内容
			// var bodyContent = ols1[0].innerHTML
			// document.getElementById("editorVal").innerHTML = bodyContent
			// 1修改，2暂存，3确认，4领导修改
			// status   1修改(点击确认按钮是领导修改)   2 填写
			if (!this.confirmButton) return
			this.form.trepairProductProcessSteps.length &&
				this.form.trepairProductProcessSteps.forEach(item => {
					item.processStepState = 0
				})
			this.checkList.length &&
				this.checkList.forEach(item => {
					this.form.trepairProductProcessSteps.forEach(items => {
						if (item == items.processStepId) {
							items.processStepState = 1
						}
					})
				})

			const loading = this.$loading({
				lock: true,
				text: "Loading",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)"
			})
			fillIn({
				accomplishTime: this.form.accomplishTime,
				accomplishUserName: this.form.accomplishUserName,
				accomplishUserId: this.form.accomplishUserId,
				conclusionFlag: this.form.conclusionFlag,
				conclusion: this.form.conclusion,
				trepairProductProcessStepParts: this.partLists,
				trepairProductProcessSteps: this.form.trepairProductProcessSteps,
				tpropertyRegistrationOuters: this.StepsList,
				content: document.getElementById("editorVal").innerHTML,
				id: this.dataforms.id,
				submitStatus: this.dataforms.status == 1 ? (status == 3 ? 4 : status) : status
			})
				.then(res => {
					this.$modal.msgSuccess(status == "2" ? "暂存成功" : status == "3" ? "提交成功" : "修改成功")
					localStorage.setItem("todoMessage", "writeContents")
					loading.close()
					// 确认
					// if (status == 1) {
					// 	this.$router.go(-1)
					// }
				})
				.catch(() => {
					loading.close()
				})
		},
		commitStepBefore() {
			beforeProcessId(this.dataforms.id).then(res => {
				if (res.data == 0) {
					this.$modal.msgError("已经没有上一条数据了")
					return false
				} else {
					this.dataforms = {
						id: res.data.id,
						repairProductId: res.data.repairProductId,
						workshopSectionId: res.data.workshopSectionId,
						technologyDictCode: res.data.technologyDictCode,
						processType: res.data.processType,
						status: this.dataforms.status,
						processStatus: res.data.processStatus
					}
					this.dataFormStatus = this.dataforms.processStatus == "0" || this.dataforms.processStatus == "3"
					localStorage.setItem("WriteKey", JSON.stringify(this.dataforms))
					this.getDetails()
				}
			})
		},
		commitStep() {
			getProcessId(this.dataforms.id).then(res => {
				if (res.data == 0) {
					this.$modal.msgError("已经没有下一条数据了")
					return false
				} else {
					this.dataforms = {
						id: res.data.id,
						repairProductId: res.data.repairProductId,
						workshopSectionId: res.data.workshopSectionId,
						technologyDictCode: res.data.technologyDictCode,
						processType: res.data.processType,
						status: this.dataforms.status,
						processStatus: res.data.processStatus
					}
					this.dataFormStatus = this.dataforms.processStatus == "0" || this.dataforms.processStatus == "3"
					localStorage.setItem("WriteKey", JSON.stringify(this.dataforms))
					this.getDetails()
				}
			})
		},
		submitForm() {
			if (this.selectPartList.length) {
				Promise.all([this.hasproductPart()]).then(res => {
					if (this.hasPart) {
						this.$modal.msgError("请不要添加相同的零件")
						setTimeout(() => {
							this.selectPartList = []
						}, 1000)
					} else {
						this.selectPartList.forEach(item => {
							this.listParts.forEach(items => {
								if (item == items.partId) {
									this.addrightList.push({
										productPartId: items.partId,
										partQuantity: null,
										partName: items.partName,
										disable: false,
										mustChangeFlag: 1,
										replacementSituation: null,
										parent: "true"
									})
								}
							})
						})
						this.open = false
						this.addData()
					}
				})
			} else {
				this.$modal.msgError("请先选择零件")
			}
		},
		hasproductPart() {
			this.hasPart = false
			this.selectPartList.forEach(item => {
				this.partLists.forEach(items => {
					if (item == items.productPartId) {
						this.hasPart = true
					}
				})
			})
		},
		addPart() {
			this.open = true
			this.selectPartList = []
		},
		getLists() {
			this.queryParamscheck.repairProductId = this.dataforms.repairProductId
			list3(this.queryParamscheck).then(res => {
				res.rows.forEach(element => {
					const parser = new DOMParser()
					const pastedDoc = parser.parseFromString(element.content, "text/html")
					const inputs = pastedDoc.querySelectorAll("input")
					inputs.forEach(item => {
						if ((item.type == "text" && item.value == "true") || (item.type == "text" && item.value == "false")) {
							item.style.setProperty("color", "white")
							var serializer = new XMLSerializer()
							// 将文档对象转换为HTML字符串
							var htmlString = serializer.serializeToString(pastedDoc)
							var doc1 = parser.parseFromString(htmlString, "text/html")
							var ols1 = doc1.querySelectorAll("body")
							// 获取body元素内的HTML内容
							var bodyContent = ols1[0].innerHTML
							element.content = bodyContent
						}
					})
				})
				this.list3Data = res.rows
				this.totalcheck = res.total
			})
		},
		getPart() {
			productPart(this.dataforms.repairProductId).then(res => {
				this.listParts = res.rows
			})
		},
		getDetails() {
			this.Nums = []
			this.reasonList = []
			this.finallylist = []
			this.addrightList = []
			this.copyList = []
			this.StepsList = []
			this.confirmButton = false
			getRepairProductProcess(this.dataforms.id).then(response => {
				this.confirmButton = true
				this.form = response.data
				this.dataforms.technologyDictCode = response.data.technologyDictCode
				//  true   0不能修改                 false1  可以修改
				this.form.trepairProductProcessStepParts.forEach(item => {
					item.disable = item.mustChangeFlag == 1 ? false : true
				})
				this.partLists = this.form.trepairProductProcessStepParts
				this.StepsList = this.form.tpropertyRegistrationOuters
				this.checkList = this.form.trepairProductProcessSteps.filter(item => item.processStepState == 1).map(items => items.processStepId)
				this.$nextTick(() => {
					var testEditor = document.getElementById("editorVal")
					var obj = testEditor.getElementsByTagName("input")
					Array.prototype.forEach.call(obj, function (v, index) {
						v.id = index
						console.log(v)
						if (v.type && v.type == "text") {
							v.autocomplete = "off"
						}
						if ((v.value && v.value == "true") || (v.value && v.value == "false")) {
							v.value = ""
							v.removeAttribute("value")
						}
					})

					// if (obj.length) {
					// 	for (var i = 0; i < obj.length; i++) {
					// 		var input = obj[i]
					// 		if (input.type == "text") {
					// 			// 创建一个新的 select 标签
					// 			var select = document.createElement("select")
					// 			// 复制 input 的 name 属性到 select 标签
					// 			select.name = input.name
					// 			select.style.width = "100px"

					// 			// 遍历所有的值，为每个值创建一个 option 元素
					// 			for (var j = 0; j < this.data.length; j++) {
					// 				var option = document.createElement("option")
					// 				option.value = this.data[j].id
					// 				option.textContent = this.data[j].name
					// 				// 将 option 元素添加到 select 标签中
					// 				select.appendChild(option)
					// 			}
					// 			// 替换 input 标签为 select 标签
					// 			input.parentNode.replaceChild(select, input)
					// 		}
					// 	}
					// }

					// var objSelect = testEditor.getElementsByTagName("select")
					// Array.prototype.forEach.call(objSelect, function (v, index) {
					// 	v.id = index + "s"
					// })
				})
			})
		},
		getpartName(name, status) {
			this.listParts.forEach(item => {
				if (name == item.partId) {
					this.partName = item.partName
					this.partFigure = item.partFigure
					this.productIds = item.productId
				}
			})
			// 判断右侧里面有没有id相同得数量或者原因
			// let flag = this.partLists.some(item => item.productPartId == name && item.parent =='true')

			let flag = this.partLists.some(item => item.productPartId == name)
			if (!flag && status == 1) {
				partSuit1({
					partId: name,
					productId: this.productIds,
					repairProductId: this.dataforms.repairProductId
				}).then(res => {
					res.rows.forEach(item => {
						this.addrightList.push({
							partFigure: item.partFigure,
							productPartId: item.partId,
							partName: item.partName,
							partQuantity: item.partQuantity,
							replacementSituation: item.replacementSituation,
							mustChangeFlag: "0",
							disable: true,
							parent: "false",
							parentId: name
						})
					})
				})
			}
		},
		getFinally(arr1, arr2) {
			// 使用 reduce 方法合并具有相同属性的对象(一个数组中id相同的合并)
			//             var mergedArray = array.reduce(function (result, obj) {
			//                 var target = result.find(function (item) {
			//                     return item.productPartId === obj.productPartId
			//                 })
			//                 if (target) {
			//                     Object.assign(target, obj)
			//                 } else {
			//                     result.push(obj)
			//                 }
			//                 return result
			//             }, [])

			// 两个数组合并数据
			// if (arr1.length && arr2.length) {
			// 	let mergedArr = arr1.map(item1 => {
			// 		let item2 = arr2.find(item2 => item2.productPartId === item1.productPartId)
			// 		return item2 ? { ...item1, ...item2 } : item1
			// 	})
			// 	this.finallylist = mergedArr
			// }
			// let data = []
			// if (arr1.length && arr2.length) {
			// 	arr1.forEach(item => {
			// 		arr2.forEach(items => {
			// 			if (item.productPartId == items.productPartId) {
			// 				let obj = {}
			// 				obj.productPartId = item.productPartId
			// 				obj.partQuantity = item.partQuantity
			// 				obj.partName = item.partName
			// 				obj.disable = item.disable
			// 				obj.replacementSituation = items.replacementSituation
			// 				data.push(obj)
			// 			}
			// 		})
			// 	})
			// }
			// arr2.forEach(items => {
			// 	if (items.partQuantity) {
			// 		delete items.partQuantity
			// 	}
			// })
			// arr1.forEach(items => {
			// 	if (items.replacementSituation) {
			// 		delete items.replacementSituation
			// 	}
			// })
			let data1 = JSON.parse(JSON.stringify(arr1))
			let data2 = JSON.parse(JSON.stringify(arr2))
			this.getData = [...data1, ...data2]

			var mergedArray = this.getData.reduce(function (result, obj) {
				var target = result.find(function (item) {
					return item.productPartId === obj.productPartId
				})
				if (target) {
					Object.assign(target, obj)
				} else {
					result.push(obj)
				}
				return result
			}, [])
			mergedArray.forEach(item => {
				item.partQuantity = item.partQuantity ? item.partQuantity : 1
			})
			this.finallylist = JSON.parse(JSON.stringify(mergedArray))
			this.copyList = JSON.parse(JSON.stringify(this.finallylist))
			this.addData()
		},
		inputData(event) {
			console.log(event)
			let input = document.getElementById(event.target.id)
			let isDisable = event.target.attributes
			let flag = false
			let flags = false
			if (event.target.type == "text") {
				input.setAttribute("value", event.target.value)
				if (event.target.name) {
					// 数量
					if (event.target.checked) {
						if (isNaN(Number(event.target.value))) {
							this.$modal.msgError("请输入数字")
						} else {
							// 数量  required字段
							Promise.all([this.getpartName(event.target.name, 1)]).then(res => {
								this.Nums.length &&
									this.Nums.forEach((item, index) => {
										if (event.target.name == item.productPartId) {
											flag = true
											if (event.target.value) {
												this.Nums.splice(index, 1, {
													productPartId: event.target.name,
													partQuantity: event.target.value,
													partName: this.partName,
													partFigure: this.partFigure,
													disable: true,
													mustChangeFlag: 0,
													parent: "true"
												})
											} else {
												this.Nums.splice(index, 1)
											}
										}
									})
								if (!flag && event.target.value) {
									this.Nums.push({
										productPartId: event.target.name,
										partQuantity: event.target.value,
										partName: this.partName,
										partFigure: this.partFigure,
										disable: true,
										mustChangeFlag: 0,
										parent: "true"
									})
								}
							})
						}
					} else if (event.target.required) {
						// 当组件挂载完成后，修改输入框的值
						this.$nextTick(() => {
							var searchStrings = ["返", "损", "探", "测", "缺", "工", "技"]
							var containsAny = searchStrings.some(function (searchString) {
								return event.target.value.includes(searchString)
							})
							if (containsAny) {
								this.dict.type.default_changereason.forEach(item => {
									if (input && item.label.includes(event.target.value.charAt(0))) {
										input.value = item.label
									}
								})
							}
							// if (input && event.target.value.includes("返")) {
							//   this.dict.type.default_changereason.forEach(item=>{
							//     if(item.label.includes("返")){
							//       input.value = item.label
							//     }
							//   })
							// }
							// if (input && event.target.value.includes("损")) {
							// 	input.value = "损伤报废更换"
							// }
							// if (input && event.target.value.includes("探")) {
							// 	input.value = "探伤报废更换"
							// }
							// if (input && event.target.value.includes("测")) {
							// 	input.value = "测力报废更换"
							// }
							// if (input && event.target.value.includes("缺")) {
							// 	input.value = "缺失补齐"
							// }
							// if (input && event.target.value.includes("工")) {
							// 	input.value = "工艺通知单要求更换"
							// }
							// if (input && event.target.value.includes("技")) {
							// 	input.value = "技术更改更换"
							// }
							input.setAttribute("value", event.target.value)
						})
						// 原因
						Promise.all([this.getpartName(event.target.name, 1)]).then(res => {
							this.reasonList.length &&
								this.reasonList.forEach((item, index) => {
									if (event.target.name == item.productPartId) {
										flags = true
										if (event.target.value) {
											this.reasonList.splice(index, 1, {
												productPartId: event.target.name,
												replacementSituation: event.target.value,
												partName: this.partName,
												partFigure: this.partFigure,
												disable: true,
												mustChangeFlag: 0,
												parent: "true"
											})
										} else {
											this.reasonList.splice(index, 1)
										}
									}
								})
							if (!flags && event.target.value) {
								this.reasonList.push({
									productPartId: event.target.name,
									replacementSituation: event.target.value,
									partName: this.partName,
									partFigure: this.partFigure,
									disable: true,
									mustChangeFlag: 0,
									parent: "true"
								})
							}
						})
					} else if (isDisable.disable && isDisable.disable.value == "true") {
						// 外委
						if (isNaN(Number(event.target.value))) {
							this.$modal.msgError("请输入数字")
						} else {
							Promise.all([this.getpartName(event.target.name, 2)]).then(res => {
								this.StepsList.length &&
									this.StepsList.forEach((item, index) => {
										if (event.target.name == item.partId) {
											flag = true
											if (event.target.value) {
												this.StepsList.splice(index, 1, {
													id: item.id || "",
													partId: event.target.name,
													quantityquantity: event.target.value,
													partName: this.partName,
													partFigure: this.partFigure
												})
											} else {
												this.StepsList.splice(index, 1)
											}
										}
									})
								if (!flag && event.target.value) {
									this.StepsList.push({
										partId: event.target.name,
										quantityquantity: event.target.value,
										partName: this.partName,
										partFigure: this.partFigure
									})
								}
							})
						}
					}
					setTimeout(() => {
						if (event.target.checked || event.target.required) {
							this.getFinally(this.Nums, this.reasonList)
						}
					}, 1000)
				}
			} else {
				if (event.target.checked) {
					input.setAttribute("checked", event.target.checked)
				} else {
					input.removeAttribute("checked")
				}
			}
			input.innerHTML = event.target.outerHTML
			this.htmlStr = document.getElementById("editorVal").innerHTML // 获取HTML字符串
		}
	}
}
</script>
<style scoped lang="scss">
::v-deep .el-tooltip__popper .el-tooltip__arrow {
	display: none !important;
}

.custom-tooltip-content {
	// color: white;
	color: #606266;
	background-color: #fff;
	padding: 1px;
	width: 760px;
	border-radius: 2px;

	#editorVal {
		width: 760px !important;
		max-height: 500px !important;
		overflow-y: auto;
		font-size: 14px;

		::v-deep input[type="text"] {
			border: none;
			outline: none;
			border-bottom: 1px solid #37b3b3;
			text-align: center !important;
		}

		::v-deep input[type="checkbox"] {
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			width: 18px;
			height: 18px;
			border: 1px solid #37b3b3;
			background-color: white;
			line-height: 18px;
			border-radius: 2px;
			color: #fff;
			text-align: center;
			font-size: 18px;
		}

		/* 取消状态 */
		::v-deep input[type="checkbox"]:after {
			width: 15px;
			height: 15px;
			display: block;
			content: "×";
			color: transparent;
			background-color: transparent;
		}

		/* 选中状态 */
		::v-deep input[type="checkbox"]:checked:after {
			content: "√";
			width: 15px;
			height: 15px;
			display: block;
			color: #37b3b3;
			background-color: #fff;
		}
	}
}

.userdropdown {
	left: 220px !important;
	top: 160px !important;
	width: 800px !important;
	height: 70vh;
	overflow-y: auto;
}

.userdropdowns {
	right: 0px !important;
	top: 160px !important;
	width: 800px !important;
	height: 70vh;
	overflow-y: auto;
	// z-index: 9999999 !important;
}

.dialog-footers {
	position: fixed;
	bottom: 2px;
	right: 15px;
}

.conclusionFlag {
	display: flex;
	align-items: center;
}

.contents {
	width: 100%;
	display: flex;
	justify-content: space-around;

	.contentsLeft {
		// width:800px;
		height: 100%;

		.box-card {
			overflow-y: auto;
			margin: 5px 10px;
			height: calc(100vh - 140px);
		}

		#editorVal {
			width: 760px !important;
			font-size: 14px;
		}
	}

	.contentsRight {
		width: calc(100% - 760px);
		font-size: 12px;
		height: 100%;

		.box-card {
			overflow-y: auto;
			margin: 5px 10px;
			height: calc((100vh - 180px) / 3);
		}

		.box-cards {
			overflow-y: auto;
			margin: 5px 10px;
			height: calc((100vh - 180px) / 2);
		}
	}

	#editorVal {
		::v-deep input[type="text"] {
			border: none;
			outline: none;
			border-bottom: 1px solid #37b3b3;
			text-align: center !important;
		}

		::v-deep input[type="checkbox"] {
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			width: 18px;
			height: 18px;
			border: 1px solid #37b3b3;
			background-color: white;
			line-height: 18px;
			border-radius: 2px;
			color: #fff;
			text-align: center;
			font-size: 18px;
		}

		/* 取消状态 */
		::v-deep input[type="checkbox"]:after {
			width: 15px;
			height: 15px;
			display: block;
			content: "×";
			color: transparent;
			background-color: transparent;
		}

		/* 选中状态 */
		::v-deep input[type="checkbox"]:checked:after {
			content: "√";
			width: 15px;
			height: 15px;
			display: block;
			color: #37b3b3;
			background-color: #fff;
		}
	}

	.parts_Content {
		.parts_Contents {
			margin-top: 10px;
			display: flex;
			align-items: center;
		}

		.titles {
			margin: 0 10px;
			width: 80px;
			text-align: center;
		}

		.title {
			width: 160px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-right: 10px;
		}
	}
}
</style>
